<template>
  <div id='DetailRemark' class='DetailRemark'>
    <div class="remark-top">
      <h3 class="fl">用户评论</h3>
      <a class="fr" href="">更多</a>
    </div>
    <div class="remark-info" v-if="Object.keys(rate).length !== 0">
      <div class="user-info">
        <p><img :src="rate[0].user.avatar" alt=""></p>
        <span>{{rate[0].user.uname}}</span>
      </div>
      <div class="remark-content">
        <div class="content-text">
          <!-- <p></p> -->
          <p> <span>{{rate[0].created |showDate(rate[0].created)}}</span> {{rate[0].style}}</p>
          <p>{{rate[0].content}}</p>
        </div>
        <div class="content-img">
          <img v-for="(item,index) in rate[0].images" :key="index" :src="item" alt="" srcset="">
        </div>
        <div class="business-reply " v-if="rate[0].explain">
          <p :class="{'txt-cut':isShow}">{{rate[0].explain}}</p>
          <span class="unfold" v-show="isShow" @click="unfoldInfo">展开</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    formatDate
  } from '../../../common/utils'
  export default {
    name: 'DetailRemark',
    props: { // 父辈向子辈传参
      rate: {
        type: [Array, Object],
        default () {
          return []
        }
      }
    },
    components: { // 组件的引用

    },
    data() {
      return {
        isShow: true

      }
    },
    methods: { // 方法
      unfoldInfo() {
        return this.isShow = false
      }

    },
    computed: { // 计算属性

    },
    created() { // 实例被创建之后执行代码

    },
    filters: {
      showDate(value) {
        //1.将时间戳转为date对象，时间戳是ms所以要乘1000
        const date = new Date(value * 1000)
        // 2.将date格式化
        return formatDate(date, 'yyyy-MM-dd')
      }
    },
    mounted() { // 页面进入时加载内容

    },
    watch: { // 监测变化

    }
  }

</script>
<style scoped>
  .DetailRemark {
    padding: 0 15px;
  }

  .remark-top {
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid #efe7e7;
    font-size: 15px;
    color: #333;
  }



  .user-info {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
  }

  .user-info p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
  }

  .user-info p img {
    width: 100%;
    height: 100%;
  }

  .user-info span {
    font-size: 18px;
    color: #333;
    margin-top: 10px;
    margin-left: 10px;
  }

  .content-img {
    display: flex;
    justify-content: flex-start;
  }

  .content-img img {
    width: 70px;
    height: 70px;
    border-radius: 10px;

  }

  .content-text {
    margin-top: 10px;
    line-height: 20px;
    font-size: 14px;
  }

  .content-text p:nth-of-type(2) {
    color: #333;
  }

  .content-text p:nth-of-type(1) {
    color: #777;
  }

  .business-reply {
    position: relative;
    padding: 13px;
    background: #eee;
    font-size: 14px;
    color: #777;
    line-height: 17px;
    top: 5px;

  }

  .unfold {
    color: #333;
    position: absolute;
    right: -3px;
    bottom: 11px;
  }

</style>
